[#escape x as (x)!?html]  
[#assign imgBlockExist = false/]
[@ZImgblock code='index'; imgBlock]
[#if imgBlock??]
[#assign imgBlockExist = true/]
<div id="floatElement">
  <a class="close-carousel common-link" href="#" onclick="stopCarousel()">关闭</a>
  <!-- 添加自定义关闭按钮 -->
  <div id="imgCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      [#list imgBlock.pics as img]
      <li data-target="#imgCarousel" data-slide-to="${img_index}" [#if img_index==0]class="active"[/#if]></li>
      [/#list]
    </ol>
    <div class="carousel-inner">
      [#list imgBlock.pics as img]
      <div class="carousel-item  [#if img_index==0]active[/#if]">
        <a href="${img.linkUrl!}" target="_blank"><img src="${img.linkLogoUrl!}" class="img-item d-block w-100" alt="..."></a>
      </div>
      [/#list]
    </div>
    <a class="carousel-control-prev" href="#imgCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#imgCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div> 
<script>
[#if imgBlockExist]
var $floatElement = $('#floatElement');
// 动画循环
function floatStartAnimation() {
    // 获取窗口的宽度和高度
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    // 生成随机位置
    var randomY = Math.random() * (windowHeight - $floatElement.height());

    // 设置新位置
    $floatElement.animate({
        right: 20,
        top: randomY
    }, 3000, floatStartAnimation);  // 3秒后重新触发动画
}
function floatStopAnimation() {
  $floatElement.stop()
}
function stopCarousel() {
    $('#imgCarousel').carousel('pause');
    $floatElement.remove()
}
$(document).ready(function() {
  $("#imgCarousel").carousel();
  // 启动动画
  floatStartAnimation();
  $floatElement.mouseenter(function() {
      // 鼠标离开时的操作
      floatStopAnimation();
  });
  $floatElement.mouseleave(function() {
      // 鼠标进入时的操作
      floatStartAnimation()
  });
});
[/#if]
</script>
<style>
/* style.css */
#floatElement {
    position: absolute;  /* 定位元素 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* 阴影效果 */
    transition: all 0.5s;  /* 动画过渡效果 */
    /* 设置初始位置 */
    right: 20px;
}
.img-item {
  max-width: ${imgBlock.imgWidth}px;
  max-height: ${imgBlock.imgHeight}px;
}
.close-carousel {
    position: absolute; /* 或者其他适合你布局的位置 */
    top: 10px; /* 调整到合适的位置 */
    right: 10px; /* 调整到合适的位置 */
    z-index: 10; /* 确保按钮在轮播图内容之上 */
}
</style>
[/#if]
[/@ZImgblock]
[/#escape]
